<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- <script src="ajax/"></script> -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="app">
        
    </div>

    <script>

        /* 
1.同步有异步
2.如何实现ajax
3. es6对象 键和值相同可以只写一个
   解构
   回调函数  抄几遍
   封装ajax
 */
function ajax({
    method,
    url,
    success
}){
    var xhr = new XMLHttpRequest();
    xhr.open(method,url,true);
    xhr.send();
    xhr.onreadystatechange =  function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var result = JSON.parse(xhr.responseText);
            success(result)
        }
    }
}
    </script>
    <script>
                    var listUrl = "http://192.168.4.18:8000/";
                    ajax({url:listUrl,method:"get",success:res=>{
                        // console.log(res)
                        var arr = res.result;
                        
                        arr.forEach((item,index)=>{
                            var {pic,title,raiting,slogo,labels}=item;
                            var sum=labels.join("/");
                            console.log(sum)
                            console.log(arr)
                            var htmlItem = `
                            <div class="item">
                                <img src=${pic} alt="">
                                <div class="jk">
                                    <a>${title}</a>
                                    <p>${raiting}</p>
                                    <p>${slogo}</p>
                                    <span class="dk"><p>${sum}</p></span>
                                </div>
                            </div>
                            `
                            $(".app").append(htmlItem) 
                    })
                        
                    }})
                </script>
</body>
</html>